<template>
  <div>
    <el-button type="text" @click="addCopon">添加规则</el-button>
    <div class="addCompent">
      <el-table :data="fullList" border style="width: 65%">
        <el-table-column label="满减条件" width="180" align="center">
          <template slot-scope="fullList">
            <el-select
              v-model="fullList.row.ruleType"
              placeholder="请选择"
              @change="selectType(fullList.row)"
              :disabled="fullList.row.disType"
            >
              <el-option
                v-for="item in modelList"
                :key="item.id"
                :label="item.fullValue"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="满减规则" width="250" align="center">
          <template slot-scope="fullList">
            <div v-if="fullList.row.ruleType === 0" class="ruleStyle">
              满
              <el-input-number
                :min="0"
                :controls="false"
                v-model="fullList.row.conditionAmount"
                class="ruleStyle__firIpt"
                @blur="vaildNumInput($event)"
              ></el-input-number
              >元，减
              <el-input-number
                :min="0"
                :controls="false"
                v-model="fullList.row.discountAmount"
                class="ruleStyle__secIpt"
                @blur="vaildNumInput($event)"
              ></el-input-number
              >元
            </div>
            <div v-if="fullList.row.ruleType === 1" class="ruleStyle">
              满
              <el-input-number
                :min="0"
                :controls="false"
                v-model="fullList.row.conditionAmount"
                class="ruleStyle__firIpt"
                @blur="vaildNumInput($event)"
              ></el-input-number
              >元，打
              <el-input-number
                :min="0"
                :max="10"
                :controls="false"
                v-model="fullList.row.discount"
                class="ruleStyle__secIpt"
                @blur="vaildInput($event)"
              ></el-input-number
              >折
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="fullList">
            <div
              @click="
                fullList.row.disType
                  ? ''
                  : Clicklongin(fullList.$index, fullList.row)
              "
              :style="{ color: fullList.row.disType ? '#E4E4E4' : '#FE4E63' }"
              class="delBtn"
            >
              删除
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class ActRuleAdd extends Vue {
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  fullContent: any;

  @Watch("fullContent")
  getFullActDetail() {
    this.getFullContent();
  }

  fullList = [
    {
      ruleType: "",
      discount: "",
      discountAmount: "",
      conditionAmount: "",
      disType: false,
    },
  ];

  /** 优惠券类型 */
  fullValue = "";

  /** 可选择优惠券列表 */
  modelList = [
    {
      id: 0,
      fullValue: "满X元减",
    },
    {
      id: 1,
      fullValue: "满X元折",
    },
  ];

  /** 验证状态 */
  validType = false;

  /**
   * 编辑满减获取规则
   */
  getFullContent() {
    this.validType = true;
    this.fullContent.fullScaleRules.forEach((item) => {
      item.disType = this.fullContent.disType ? true : false;
    });
    this.fullList = this.fullContent.fullScaleRules;
  }

  /**
   * 添加优惠券
   */
  addCopon() {
    this.validType = false;
    this.fullList.push({
      ruleType: "",
      discount: "",
      discountAmount: "",
      conditionAmount: "",
      disType: false,
    });
  }

  selectType(row) {
    row.conditionAmount = "";
    row.disType = false;
    row.discount = "";
    row.discountAmount = "";
  }

  /**
   * 输入折扣验证
   */
  vaildInput(e) {
    const regs = /^([0-9])(\.[0-9])?$/;
    this.validType = regs.test(e.target.value);
    if (!regs.test(e.target.value)) {
      e.target.value = "";
      this.$message.error("请输入小于10的折扣");
    }
  }

  /**
   * 输入数字验证
   */
  vaildNumInput(e) {
    const regs = /^[0-9]*[1-9][0-9]*$/;
    this.validType = regs.test(e.target.value);
    if (!regs.test(e.target.value)) {
      e.target.value = "";
      this.$message.error("请输入非负整数");
    }
  }

  Clicklongin(index) {
    this.fullList.splice(index, 1);
  }
}
</script>

<style lang="scss" scoped>
.addCompent {
  margin-top: 10px;
  margin-bottom: 20px;
}
@include b(ruleStyle) {
  @include flex(center, center);
  @include e(firIpt) {
    width: 80px;
    margin: 0px 5px;
  }
  @include e(secIpt) {
    width: 60px;
    margin: 0px 5px;
  }
}

.delBtn {
  cursor: pointer;
}

/deep/ .cell {
  @include flex(center, center);
}
</style>
